<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.user"
            placeholder="请输入分类名称搜索"
          />
        </el-form-item>

        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>

        <el-form-item class="box">
          <el-button type="success" @click="onSearch">
            搜索
            <el-icon><Search /></el-icon>
          </el-button>
          <el-button type="primary" @click="$router.push('/itemAdd')">
            新增
            <el-icon><Plus /></el-icon>
          </el-button>
          <el-button type="danger" @click="Refresh">
            刷新
            <el-icon><Refresh /></el-icon>
          </el-button>
        </el-form-item>
      </el-form>

    </div>

    <el-table :data="cates" style="width: 100%" height="500px" row-key="id">
      <el-table-column prop="id" label="商品id" />

      <el-table-column prop="thumb" label="商品图片">
        <template #default="{ row }">
          <div class="demo-image__preview">
            <el-image
              style="width: 50px; height: 50px"
              :src="row.thumb"
              :zoom-rate="1.2"
              :preview-src-list="row.srcList"
              fit="cover"
              preview-teleported
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="itemName" label="商品名称" />

      <el-table-column prop="desc" label="商品描述">
        <template #default="{ row }">
          <el-tooltip class="box-item" effect="dark" placement="bottom">
            <template #content>
              <div style="width: 500px">
                {{ row.desc }}
              </div>
            </template>
            <div>{{ row.desc.substr(0, 10) + "..." }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="price" label="商品价格" />

      <el-table-column prop="inventory" label="库存">
        <template #default="{ row }">
          <el-tag :color="row.sale > 500 ? 'red' : 'green'">{{
            row.price
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="onsale" label="状态">
        <template #default="{ row }">
          <el-tag :color="row.onsale ? '#E8F4FF' : '#FFF8E6'">{{
            row.onsale ? "已上架" : "已下架"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="isredactClassify(row.id)">
            <el-icon class="el-icon--right">
              <EditPen />
            </el-icon>
          </el-button>

          <el-button type="primary" color="#FF4949" @click="remove(row.id)">
            <el-icon class="el-icon--right">
              <Delete />
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    hide-on-single-page
    v-model:current-page="size"
    v-model:page-size="pageSize"
    background
    layout="prev, pager, next, jumper, sizes"
    :total="total" />

  </div>
</template>

<script>
import { addItem } from '@a/itemAdd'
import { delItem } from '@a/itemLists'
export default {
  name: 'ItemAdd',
  data () {
    return {
      value1: [],
      formInline: {
        user: '', // 搜索关键字
        start: '', // 开始日期
        end: '' // 结束日期
      },
      // 分页的参数
      cates: [],
      total: 0,
      pageSize: 10,
      size: 1
    }
  },
  methods: {
    addItem () {
      addItem({
        ...this.formInline,
        pageSize: this.pageSize,
        size: this.size
      }).then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    },
    onSearch () {
      // 商品列表搜索
      console.log(this.value1)
      this.formInline.start = this.value1[0]
      this.formInline.end = this.value1[1]
      this.addItem()
      this.value1 = []
      this.formInline.user = ''
    },
    Refresh () {
      // 商品列表刷新
      this.$router.go(0)
    },
    isredactClassify (id) {
      // 商品列表修改 跳转到商品页
      this.$router.push({
        path: '/itemUpdate',
        query: {
          id
        }
      })
    },
    remove (id) {
      // 商品列表删除
      this.$confirm('确定删除吗,如果存在下级节点则一并删除，此操作不能撤销').then(() => {
        delItem({
          id
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              deration: 1500
            })
            this.addItem()
          }
        })
      })
    }
  },
  watch: {
    pageSize () {
      this.addItem()
    },
    size () {
      this.addItem()
    }
  },
  created () {
    this.addItem()
  }
}
</script>

<style lang="scss" scoped>
.el-pagination{
  margin-top: 1%;
}
.demo-form-inline {
  display: flex;
  .block {
    margin-right: 30px;
  }
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
